<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" class="hello1">不区分大小写
        <input type="text" class="hello2">区分大小写
    </div>
</body>
<script>
    //事件源
    let input1 = document.querySelector('.hello1')
    let input2 = document.querySelector('.hello2')
    let input3 = document.querySelector('.hello1' && '.hello2')

    //绑定事件
    input1.onkeydown = function (event) {
        if (event.shiftKey) {
            alert("shift被按下")
        }
        if (event.altKey) {
            alert("alt被按下")
        }
        console.log("你好，" + String.fromCharCode(event.keyCode) + "键正在按下")
    }

    input2.onkeypress = function (event) {
        console.log("你好，" + String.fromCharCode(event.keyCode) + "键正在按下")
    }

    input3.onkeyup = function (event) {
        console.log(String.fromCharCode(event.keyCode) + "键松开了")
    }
</script>

</html>